define("ar_simplemde", ['vue', 'gitee', 'utils', '/cdn/simplemde/simplemde.min.js',
    'css!/cdn/simplemde/simplemde.min.css',
    'css!/cdn/font-awesome-4.7.0/css/font-awesome.min.css',
], function (Vue, gitee, utils, simplemde) {

    let cps = {

        data() {
            return {
                filepath: "",
                repo: "",
                mde: {},
                files: []
            }
        },

        mounted() {
            let that = this;
            let mde = new simplemde({
                element: document.querySelector("#ar-simplemde"),
                autofocus: true,
                spellChecker: false,//关闭拼写检查
                autoDownloadFontAwesome: false,
                shortcuts: {
                    saveFile: "Cmd-S"
                },
                toolbar: ["bold", "italic", "heading", "|", "quote", "unordered-list", "ordered-list", "|", "link", "image", "|", "preview", "side-by-side", "fullscreen", "|", "guide", "|",
                    {
                        name: "saveFile",
                        action: function save(editor) {
                            that.update();
                        },
                        className: "fa fa-save",
                        title: "保存",
                    },
                    "|", // Separator
                ]
            });
            mde.codemirror.setOption("extraKeys", {
                "Ctrl-S": function (cm) {
                    that.update();
                }
            });
            this.mde = mde;
            this.repo = gitee.getRepo();
            this.loadFileTree(this.repo);
            this.fetchData();
        },

        methods: {
            update() {
                let value = this.mde.value();
                gitee.getFileContent(this.filepath, false, false).then(data => {
                    if (data !== value) {
                        gitee.updateFileCache(this.filepath, value, this.repo);
                    } else {
                        utils.message("文件内容未变化！", "info");
                    }
                });
            },
            fetchData() {
                let filepath = this.$route.query.filepath;
                let repo = this.$route.query.repo;
                if (filepath) {
                    this.filepath = filepath;
                    if (this.repo !== repo) {
                        this.loadFileTree(repo);
                    }
                    this.repo = repo;
                    gitee.getFileContent(filepath, false, false, repo).then(data => this.mde.value(data));
                }
            },
            loadFile() {
                gitee.getFileContent(this.filepath, false, false, gitee.getRepo()).then(data => this.mde.value(data));
            },
            loadFileTree(repo) {
                gitee.getFileTree(false, repo).then(data => {
                    data = data.filter(n => n.type === "blob" && n.path.endsWith(".md"));
                    this.files = data;
                });
            }
        },

        watch: {
            // 如果路由有变化，会再次执行该方法
            '$route': 'fetchData'
        },

        template: `
            <div class="mt-3 mx-5 mb-5">
                <el-tag :type="repo==='webme'?'danger':'info'">{{repo}}</el-tag>
                <b>当前文件：</b>
                <el-select class="mb-3" v-model="filepath" placeholder="请选择" @change="loadFile">
                    <el-option
                    v-for="item in files"
                    :key="item.path"
                    :label="item.path"
                    :value="item.path">
                    </el-option>
                </el-select>
                <textarea @keyup.enter="alert(1)" id="ar-simplemde"></textarea>
            </div>
        `,

    };

    return {
        cps
    }

});